<!-- 1：5地貌面-面 -->
<template>
    <el-drawer v-model="addDrawer" size="50%" :show-close="false" @opened="openDrawer" @close="closeDrawer">
        <template #title>
            <el-space direction="vertical" class="space-width100">
                <div v-if="route.path.includes('dataIntegrate') && form.qcOpinion">
                    <el-form :model="form" :inline="true" label-width="140px">
                        <el-form-item label="质检不通过原因" style="width: 100%">
                            <el-input v-model="form.qcOpinion" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" resize="none"
                                clearable></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <h2>
                    <el-row justify="space-between">
                        <span><svg-icon icon-class="list"></svg-icon><span style="padding-left: 15px">{{ typeName }}</span></span>
                        <div>
                            <el-button type="primary" @click="confirmClick" :disabled="drawerLoading" v-if="isShowSave">保存</el-button>
                            <el-button type="primary" @click="closeDrawer">关闭</el-button>
                        </div>
                    </el-row>
                </h2>
            </el-space>
        </template>
        <template #default>
            <el-form :model="form" ref="addRef" :inline="true" :rules="formRules" label-width="200px"
                v-loading="drawerLoading">
                <el-row justify="space-between">
                    <el-form-item label="省">
                        <el-input v-model="form.province" clearable disabled></el-input>
                    </el-form-item>
                    <el-form-item label="市">
                        <el-input v-model="form.city" clearable disabled></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="区/县">
                        <el-input v-model="form.county" clearable disabled></el-input>
                    </el-form-item>
                    <el-form-item label="编号" prop="id">
                        <el-input v-model="form.id" placeholder="请输入编号" clearable maxlength="17"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="地貌代码" prop="geomorphyCode">
                        <el-input v-model="form.geomorphyCode" placeholder="请输入地貌代码" clearable maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="地貌名称" prop="geomorphyName">
                        <el-input v-model="form.geomorphyName" placeholder="请输入地貌名称" clearable maxlength="30"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="地貌类型" prop="geomorphyType">
                        <el-input v-model="form.geomorphyType" placeholder="请输入地貌类型" clearable maxlength="20"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="地貌描述" prop="geomorphyDescription" style="width:100%">
                        <el-input v-model="form.geomorphyDescription" placeholder="请输入地貌描述" :autosize="{ minRows: 6, maxRows: 12 }"
                            type="textarea" show-word-limit maxlength="255" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="地表破裂(断塞塘等)长 [米]" prop="length">
                        <el-input v-model="form.length" placeholder="请输入地表破裂(断塞塘等)长 [米]" clearable maxlength="8"></el-input>
                    </el-form-item>
                    <el-form-item label="地表破裂(断塞塘等)宽 [米]" prop="width">
                        <el-input v-model="form.width" placeholder="请输入地表破裂(断塞塘等)宽 [米]" clearable maxlength="8"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="地表破裂(断塞塘等)高/深 [米]" prop="height">
                        <el-input v-model="form.height" placeholder="请输入地表破裂(断塞塘等)高/深 [米]" clearable maxlength="8"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="最大垂直位移 [米]" prop="maxVerticalDisplacement">
                        <el-input v-model="form.maxVerticalDisplacement" placeholder="请输入最大垂直位移 [米]" clearable maxlength="8"></el-input>
                    </el-form-item>
                    <el-form-item label="最大水平位移 [米]" prop="maxHorizenOffset">
                        <el-input v-model="form.maxHorizenOffset" placeholder="请输入最大水平位移 [米]" clearable maxlength="8"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="性质" prop="feature">
                        <el-input v-model="form.feature" placeholder="请输入性质" clearable maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="形成时代" prop="createDate">
                        <dict-select code="AgeCVD" :value="form.createDate" @update="val => form.createDate = val"></dict-select>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="是否为已知地震的地表破裂" prop="isSurfaceRuptureBelt">
                        <el-radio-group v-model="form.isSurfaceRuptureBelt">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="地震地表破裂类型" prop="fractureType">
                        <dict-select code="FracPtTypeCVD" :value="form.fractureType" @update="val => form.fractureType = val"></dict-select>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="照片文件编号" prop="photoAiid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.photoAiid" placeholder="照片文件编号" clearable maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="photoAiidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <ImageUpload v-model="form.photoAiidName" @uploadImage="uploadSuccess('photoAiid', $event)"
                                @delImage="deleteFile('photoAiid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="照片原始文件编号" prop="photoArwid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.photoArwid" placeholder="照片原始文件编号" clearable maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="photoArwidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <FileUpload v-model="form.photoArwidName" @uploadFile="uploadSuccess('photoArwid', $event)"
                                @delFile="deleteFile('photoArwid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="照片镜向" prop="photoViewingTo">
                        <dict-select code="CVD-16-Direction" :value="form.photoViewingTo" @update="val => form.photoViewingTo = val"></dict-select>
                    </el-form-item>
                    <el-form-item label="拍摄者" prop="photographer">
                        <el-input v-model="form.photographer" placeholder="请输入拍摄者" clearable maxlength="20"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="地貌符号基础位" prop="nsb1">
                        <el-input v-model="form.nsb1" placeholder="请输入地貌符号基础位" clearable maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="地貌符号下标位" prop="nsb2">
                        <el-input v-model="form.nsb2" placeholder="请输入地貌符号下标位" clearable maxlength="10"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="地貌符号上标位" prop="nsb3">
                        <el-input v-model="form.nsb3" placeholder="请输入地貌符号上标位" clearable maxlength="10"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="描述" prop="commentInfo" style="width:100%">
                        <el-input v-model="form.commentInfo" placeholder="请输入描述" :autosize="{ minRows: 6, maxRows: 12 }"
                            type="textarea" show-word-limit maxlength="2147483647" clearable></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
        </template>
    </el-drawer>
</template>
<script setup>
// 引入基础方法
import useSpatialData from '@/hooks/useSpatialData';
// 引入表单验证规则
import { eightDouble, fourInt } from '@/utils/validate';
const { route, addDrawer, drawerLoading, form, typeName, openDrawer, closeDrawer, confirmClick, uploadSuccess, deleteFile, isShowSave } = useSpatialData();
// 表单验证规则
const formRules = {
    id: [{ required: true, message: '请输入编号！', trigger: 'blur' }],
    length: [eightDouble],
    width: [eightDouble],
    height: [eightDouble],
    maxVerticalDisplacement: [eightDouble],
    maxHorizenOffset: [eightDouble],
    maxTDisplacement: [eightDouble],
    isSurfaceRuptureBelt: [{ required: true, message: '请选择', trigger: 'change' }],
}
</script>
<style lang="scss" scoped></style>